/*
* @file 交易列表
*/
import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Button,Card,Row,Col,Table,Icon,Pagination,DatePicker,Form,Breadcrumb,message} from 'antd';
import moment from 'moment';

import Tabtitle from '../../../components/common/TabTitle';
import Tablelist from '../../../components/common/TableData';
import style from './pdttrade.less';

const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const dateFormat = 'YYYY/MM/DD';
const PdtTrade = ({dispatch,pdttrade,location,form: {
			getFieldDecorator,
			validateFields,
			getFieldsValue },
})=>{
	if(pdttrade.status){
		const {tradelist,page} = pdttrade;
		const columns = [
			{
				title: '日期',
				dataIndex: 'date',
				key: 'date',
				sorter: (a, b) => a.date > b.date?1:-1,
				width: 100,
			},
			{
				title: '股票代码',
				dataIndex: 'stockCode',
				key: 'stockCode',
				sorter: (a, b) => a.stockCode - b.stockCode,
				width: 100,
			},
			{
				title: '成交数量',
				dataIndex: 'tradeNumber',
				key: 'tradeNumber',
				width: 100,
			},
			{
				title: '成交金额',
				dataIndex: 'tradeAmount',
				key: 'tradeAmount',
				width: 100,
			},
			{
				title: '交易类型',
				dataIndex: 'tradeType',
				key: 'tradeType',
				width: 100,
			},
			{
				title: '多空方向',
				dataIndex: 'futuresValueText',
				key: 'futuresValueText',
				width: 100,
			},
			{
				title: '手续费',
				dataIndex: 'poundage',
				key: 'poundage',
				width: 100,
			},
		]

		const bD = location.query.beginDate;
		const eD = location.query.endDate;
		// 分页
		// function onShowSizeChange(currentpage, pagesize) {
		// 	const querys = location.query
		// 	dispatch({
		// 		type:'pdttrade/changeRoute',
		// 		payload:{
		// 			...querys,
		// 			pagesize,
		// 			currentpage:1
		// 		}
		// 	})
		// }
		// function onChangecurrentpage(current){
		// 	const querys = location.query
		// 	dispatch({
		// 		type:'pdttrade/changeRoute',
		// 		payload:{
		// 			...querys,
		// 			currentpage:current
		// 		}
		// 	})
    //
		// }
		// function onSorterChange(currentpage, pagesize, filters, sorter){
		// 	const querys = location.query
		// 	const orderField = filters.field
		// 	const orderSort = filters.order
		// 		dispatch({
		// 		type:'pdttrade/changeRoute',
		// 		payload:{
		// 			...querys,
		// 			currentpage:1,
		// 			orderFiled:orderField,
		// 			orderSort:orderSort
		// 		}
		// 	})
		// }
  function handleSubmit(e) {
	  e.preventDefault();
	  validateFields((err,fieldsValue)=> {
	  	if (err) {
	    return;
	  	}
	  	const productId = location.query.productId
	  	const productCode = location.query.productCode
	  	const rangeValue = fieldsValue['range-picker'];
	  	if(!_.isEmpty(rangeValue)){
	  		const beginDate = rangeValue[0].format('YYYYMMDD')
	   	const endDate = rangeValue[1].format('YYYYMMDD')
	   	dispatch({
						type:'pdttrade/changeRoute',
						payload:{
							productId,
							productCode,
							currentpage:1,
							beginDate,
							endDate
						}
					})
	   }else{
	   	message.warning('请选择时间!');
	   }

	  })
  }
		function handleBacktrack(){
			if(location.query.productCode){
				dispatch(routerRedux.push({
					pathname:`/systemMgt/accountMgt/pdtMgt?name=${location.query.productCode}`,
				}))
			}else{
				dispatch(routerRedux.push({
					pathname:`/systemMgt/accountMgt/pdtMgt?name=${location.query.productName}`,
				}))
			}
		}
		return(
				<div>
					<div className={style.breaddiv}>
						<Breadcrumb separator=">">
							<Breadcrumb.Item onClick={handleBacktrack} className={style.breadcr}>产品管理</Breadcrumb.Item>
							<Breadcrumb.Item>{`${location.query.productCode}交易列表`}</Breadcrumb.Item>
						</Breadcrumb>
					</div>
					<div className="page-trade-table content-inner">
						<div className={style.toolbar}>
							<Form layout="inline" onSubmit={handleSubmit}>
								<Row className={style.searchRow} type="flex" justify="start" align="middle">
									<Col>
										<FormItem
											label="时间选择"
										>
											{getFieldDecorator('range-picker',{
												initialValue: [moment(bD),moment(eD)],
											})(
								        <RangePicker format={dateFormat}/>
								       )}
										</FormItem>
									</Col>
									<Col>
										<Button type="primary" htmlType="submit">查询</Button>
									</Col>
								</Row>
							</Form>
						</div>
						<Card>
							<Table
								columns={columns}
								dataSource={tradelist}
								pagination={false}
								scroll={{y:450}}
								record={record => `${record.date}-${record.stackCode}-${record.tradeNumber}-${record.tradeType}`}
								style={{marginBottom:50}}
							/>
						</Card>

					</div>
				</div>
			)
	}else{
		return null;
	}
}
PdtTrade.PropTypes = {};
export default connect(({pdttrade})=>({pdttrade}))(Form.create()(PdtTrade))
